<!-- src/Home.vue -->
<template>
  <div class="home-app">
    <h1>Vue 3 学习指南</h1>
    <ul>
      <li><router-link to="/basic-syntax">基础语法</router-link></li>
      <li><router-link to="/components">组件</router-link></li>
      <li><router-link to="/reactivity">响应式系统</router-link></li>
      <li><router-link to="/route-test">路由</router-link></li>
      <li><router-link to="/name-view">命名视图</router-link></li>
      <li><router-link to="/state-management">状态管理</router-link></li>
      <li><router-link to="/class-extends">class继承</router-link></li>
      <li><router-link to="/ts-study">ts基础知识</router-link></li>
      <li><router-link to="/ts-type">ts-类型</router-link></li>
      <li><router-link to="/interview">vue面试题</router-link></li>
      <li><router-link to="/keepalive">手写keep-alive组件</router-link></li>
      <li><router-link to="/mylist">虚拟列表</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>
<style lang="scss">
.home-app {
  margin: 20px auto;
  padding: 42px 20px;
  h1 {
    text-align: center;
  }
  ul {
    width: 200px;
    text-align: center;
    margin: 0 auto;
    li {
      background-color: aquamarine;
      margin: 10px 0;
    }
  }


}
</style>
